import React, {Component} from 'react';
import {r} from "./Const"

class Vertex extends Component {

    constructor() {
        super();
        this.state = {red: false};
    }
    componentDidMount() {
        if( this.props.id === 0 ) return;
        // document.getElementById('ranim'+this.props.id).beginElement();
        document.getElementById('cxanim'+this.props.id).beginElement();
        document.getElementById('cyanim'+this.props.id).beginElement();
        document.getElementById('tanim'+this.props.id).beginElement();
    }
    render() {
        if (!this.state.red && this.props.redNumber === this.props.id) {
            this.setState({red: true});
        }
        let tspan;
        if (this.props.algo === 3) {
            tspan = <tspan x={this.props.pos.x} dy='1.6em' >{this.props.label}</tspan>
        }
        else if (this.props.algo === 0 || this.props.algo === 1) {

            if (this.props.id !== 0) {
                tspan = <tspan x = {this.props.pos.x} dy = "1.6em">{this.props.label}</tspan>
            } else {

                tspan =
                    (<React.Fragment>
                        <tspan x = {this.props.pos.x} dy = "1.15em">{this.props.nSymbol === "N" ? "N:" : ""}{this.props.nowValue}</tspan>
                        <tspan x={this.props.pos.x} dy='1.15em' >{this.props.label}</tspan>
                    </React.Fragment>)
            }
        }
        else if (this.props.algo === 2){
            tspan = (<React.Fragment>
                <tspan x={this.props.pos.x} dy='1.15em' >N:{this.props.label}</tspan>
                <tspan  x={this.props.pos.x} dy='1.15em'>V:{this.props.ret}</tspan>
            </React.Fragment>)
        }
        return (
            <g>
                <circle
                    cx={this.props.pos.x}
                    cy={this.props.pos.y}
                    r={r}
                    // ry={3}
                    stroke="black" strokeWidth="0.5" fill={
                        this.state.red ? '#ffb3a7': (this.props.current?'lightgreen':'white')}
                >
                    <animate
                        id={'cxanim'+this.props.id}
                        attributeName='cx'
                        values={this.props.pos.px+";"+this.props.pos.x}
                        dur= {this.props.time + "ms"}
                        repeatCount="1"
                    />
                    <animate
                        id={'cyanim'+this.props.id}
                        attributeName='cy'
                        values={this.props.pos.py+";"+this.props.pos.y}
                        dur={this.props.time + "ms"}
                        repeatCount="1"
                    />
                </circle>
                <text
                    style={{font:'3px sans-serif'}}
                    x={this.props.pos.x}
                    y={this.props.pos.y-4}
                    textAnchor={'middle'}
                    // alignmentBaseline={'top'}
                >
                    <animate
                        id={'tanim'+this.props.id}
                        attributeName='opacity'
                        values='0;0;1'
                        dur={this.props.time * 2 + "ms"}
                        repeatCount="1"
                    />
                    {tspan}
                </text>

            </g>
        );
    }
}


export default Vertex;